<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/fn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<%-- Displays the shop coordinates with an enlargeable map. The following parameters can be used :
  	- title : shop title.
	- mapID : map ID.
	- phoneNum : shop phone number.
	- mapBoxId : map box ID.
	- shopName : shop name.
	- shopAddr : shop address.
	- shopCity : shop city (postal code + city name).
	- coords : google map coords (link to google map coordinates).
--%>


<div>
  <div class="blocLeftModule">
    <div id="boutiques-coord" class="blocRondOrange">
      <h3>
        <span>${param.title}</span>
      </h3>
      <address>
        <strong> ${param.shopName}</strong><br>
        ${param.shopAddr}<br>
        ${param.shopCity}<br>
        Tel. : ${param.phoneNum }
      </address>
      <a href="javascript:;" onclick="widenMap('${param.mapBoxId}', '${param.mapId}', true, true);">afficher la carte</a>
    </div>
  </div>

  <%-- The map container --%>
  <div id="${param.mapBoxId}">
  	<div class="boxCnt"  style="width:430px; height:370px;">
  		<p class="boxTitle"></p>
  		<div id="${param.mapId}" style="position: relative; width:795px; height:470px display:none">
		    <iframe width="425" height="350" frameborder="0" scrolling="no"
		      marginheight="0" marginwidth="0"
		      src="${param.coords }">
		    </iframe>
		    <br />
		  </div>
  	</div>
  </div>
</div>

<%-- Initializing --%>
<script type="text/javascript" charset="UTF-8">

  $(document).ready(function() {
	  // initializing the widen map box
	  initWidenedMapBox('${param.mapBoxId}', '${param.mapId}', '${param.title}');
  });
</script>